//渲染是否显示或隐藏
import {
  vProps
} from "./propsType";

const {
  vIf,
  vShow
} = vProps;

export function render(vm, propsPool) {
  const $data = vm.$data;
  // console.log($data);
  //{isShowImg1: true, isShowImg2: true}

  for (let [node, info] of propsPool) {
    // console.log(node);
    //<img>
    // console.log(info);
    //{type: 'v-if', prop: 'isShowImg1'}

    switch (info.type) {
      case vIf:
        //注释节点不存在时创建注释节点
        info.comment = info.comment || document.createComment(vIf);
        // console.log(info.comment);
        //<!--v-if-->

        //!$data[info.prop] -> false
        !$data[info.prop] && node.parentNode.replaceChild(info.comment, node)
        break;
      case vShow:
        !$data[info.prop] && (node.style.display = 'none');
        break;
      default:
        break;
    }
  }
}

export function update(vm, key, propsPool) {
  const $data = vm.$data;

  // console.log(key);
  //isShowImg1 / isShowImg2

  for (let [node, info] of propsPool) {

    if (info.prop === key) {
      switch (info.type) {
        case vIf:
          //移除或新增节点(使用替换节点的方式也可以)
          !$data[info.prop] ?
            node.parentNode.replaceChild(info.comment, node) :
            info.comment.parentNode.replaceChild(node, info.comment);
          break;
        case vShow:
          //!$data[info.prop] -> false
          !$data[info.prop] ?
            (node.style.display = 'none') :
            (node.style.display = '');
          break;
        default:
          break;
      }
    }
  }
}